.nav {
  height: 70px;
  position: relative;
  display: grid;
  grid-template-columns: 326px 326px 1fr 326px 326px;
  z-index: 1;
  &::before {
    z-index: -1;
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    height: 119px;
    background: url(./bg.png) no-repeat;
    background-size: cover;
  }
}
.item {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  position: relative;
  cursor: pointer;
  &.item1 {
    &::before {
      background-image: url(./l-orange.png);
    }
  }
  &.bluebg {
    &::before {
      background-image: url(./l-blue.png);
    }
  }
  &.item3 {
    &::before {
      background-image: url(./r-blue.png);
    }
    &:hover {
      &::before {
        background-image: url(./r-orange.png);
      }
    }
  }
}
.item1,
.item2,
.item3 {
  &::before {
    content: "";
    position: absolute;
    width: 344px;
    height: 50px;
    left: -9px;
    top: 10px;
    background: url(./l-blue.png) no-repeat center center;
    background-size: 100% 100%;
  }
  &:hover {
    &::before {
      background-image: url(./l-orange.png);
    }
  }
}
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  font-size: 22px;
  color: #dcdfff;
  letter-spacing: 3px;
  font-size: 25px;
  font-weight: 700;
}
